import React, { useState, useEffect } from "react";
import { message, ConfigProvider } from "antd";
import './App.css';
import ACserver from "./ACServer";

const handleGetAppsIndex = async (messageApi: any) => {
  const headers = {
    'Content-Type': 'application/json',
  };
  try {
    const response = await fetch('/cgi-bin/luci/admin/apps-index/api/apps-index.lua', {
      method: 'GET',
      headers: headers,
    });

    if (!response.ok) {
      throw new Error(response.statusText);
    }

    if (!response.body) return;

    const responseText = await response.text();
    const responseObject = JSON.parse(responseText);
    if (!responseObject.success) {
      messageApi.warning(responseObject.msg);
    } {
      return responseObject.data;
    }
  } catch (error) {
    messageApi.error(error);
  }
};

function App() {
  const [appsIndex, setAppsIndex] = useState<any[]>([]);
  const [messageApi, contextHolder] = message.useMessage();

  // useEffect(() => {
  //   const fetchData = async () => {
  //     const data = await handleGetAppsIndex(messageApi);
  //     setAppsIndex(data);
  //   };
  //   fetchData();
  // }, []);

  return (
    <div className="App">
        <ACserver />
    </div>
  );
}

export default App;
